<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>挂号记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="yes" name="apple-touch-fullscreen">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no,email=no" name="format-detection">
		<!--[if lt IE 9]> 
		<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
		<![endif]-->
		<script type="text/javascript" src="../../js/init.js"></script>
		<link rel="stylesheet" href="../../font/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<script type="text/javascript" src="../../font/iconfont.js"></script>
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
				background-color: #f1f1f1;
			}
			.tit {
				position: relative;
				line-height: 1rem;
				height: 1rem;
				background-color: #fff;
			}
			.tit .one {
				position: absolute;  
				font-size: 0.32rem;
				color: #428bca;
				left: 0.4rem;
			}
			.tit .icon-tiaozhuan {
				position: absolute;
				font-size: 0.32rem;
				right: 0.2rem;
				color: #666;
			}
			.cons {
				padding: 0.26rem ;
				background-color: #f1f1f1;
				font-size: 0.3rem;
			}
			.cons .con {
				margin-bottom: 0.26rem;
				background-color: #fff;
				border-radius: 0.2rem;
			}
			.cons .con .top {
				padding: 0 0.16rem;
				line-height: 0.86rem;
				height: 0.86rem;
				position: relative;
				border-bottom: 1px dashed #e3e3e3;
			}
			.cons .con .top .left {
				color: #1388d2;
			}
			.cons .con .top .left.noZhifu {
				color: #ec6941;
			}
			
			.cons .con .top .right {
				color: #7b7b7b;
				position: absolute;
				right: 0.2rem;
			}
			.cons .con .bottom {
				padding: 0.16rem;
				position: relative;
			}
			.cons .con .bottom text {
				display: block;
				height: 0.56rem;
				line-height: 0.56rem;
				color: #222;
			}
			.cons .con .bottom .time {
				color: #7b7b7b;
				
			}
			.cons .con .bottom .price {
				position: absolute;
				right: 0.2rem;
				color: #ec6941;
				bottom: 1rem;
			}
			.cons .con .bottom button {
				color: #fff;
				background-color: #428bca;
				height: 0.68rem;
				width: 1.88rem;
				line-height: 0.68rem;
				text-align: center;
				position: absolute;
				right: 0.2rem;
				bottom: 0.2rem;
				border-radius: 0.1rem;
				border: none;
			}
			#show {
				
				top: 1rem;
				position: absolute;
				z-index: 2;
				height: 12.44rem;
				width: 100%;
				background-color: rgba(0,0,0,0.5);
			}
			.show {
				display: none;
			}
			.titl {
				background-color: #fff;
				padding-bottom: 0.45rem;
			}
			#show .conti{
				border-bottom: 1px solid #d2d2d2;
				position: relative;
				line-height: 1rem;
				height: 1rem;
				background-color: #fff;
			}
			#show .cont {
				border-bottom: 1px solid #d2d2d2;
				position: relative;
				line-height: 0.8rem;
				height: 0.8rem;
			}
			#show .conti .one {
				font-size: 0.3rem;
				color: #428bca;
				position: absolute;
				left: 0.4rem;
			}
			#show .conti .iconfont {
				color: #999;
				font-size: 0.3rem;
				position: absolute;
				right: 0.2rem;
			}
			#show .cont .one{
				font-size: 0.3rem;
				color: #333;
				position: absolute;
				left: 0.2rem;
				
			}
			#show .cont .iconfont {
				color: #0a95db;
				position: absolute;
				right: 0.2rem;
			}
			.icon-xuanzedui {
				color: #0a95db;
			}
		</style>
	</head>
	<body>
		<header>
			<span></span>
			<text class="title">挂号记录</text>
			<text class="iconfont icon-llmainpageback" id="back"></text>
			<text class="iconfont icon-iconfontclosesmall"></text>
			<text class="iconfont icon-gengduo"></text>
		</header>
		<div class="tit">
			<text class="one">所有人</text>
			<text class="iconfont icon-tiaozhuan"></text>
		</div>
		<div id="show" class="show">
			<div class="conti">
				<text id="conti" class="one">所有人</text>
				<text class="iconfont icon-tiaozhuan"></text>
			</div>
			<div class="titl" id="showIcon">
				<div class="cont">
					<text class="one">所有人</text>
					<text class="iconfont icon-xuanzedui"></text>
				</div>
				<div class="cont">
					<text class="one">崔雪飞</text>
					<text class="iconfont"></text>
				</div>
				<div class="cont">
					<text class="one">江文强</text>
					<text class="iconfont"></text>
				</div>
				<div class="cont">
					<text class="one">崔大炮</text>
					<text class="iconfont"></text>
				</div>
			</div>
		</div>
		<section class="cons">
			<div class="con">
				<div class="top">
					<text class="left noZhifu">未支付</text>
					<text class="right iconfont icon-shijian"> 就诊日期：2016-12-12</text>
				</div>
				<div class="bottom">
					<text class="yuanqu">就诊院区：总院</text>
					<text class="keshi">就诊科室：神经内科</text>
					<text class="person">就诊人：黄奕天</text>
					<text class="time">2016-12-12 15:26:28</text>
					<text class="price">￥14</text>
					<button>取消挂号</button>
				</div>
			</div>
		</section>
	</body>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript">
		var htmlC = document.getElementsByClassName("cons")[0].innerHTML;
		
				for (var i = 0;i < 2;i++) {
					htmlC += '<div class="con">'+
					'<div class="top">'+
						'<text class="left">已支付</text>'+
						'<text class="right iconfont icon-shijian"> 就诊日期：2016-12-12</text>'+
					'</div>'+
					'<div class="bottom">'+
						'<text class="yuanqu">就诊院区：总院</text>'+
						'<text class="keshi">就诊科室：神经内科</text>'+
						'<text class="person">就诊人：黄奕天</text>'+
						'<text class="time">2016-12-12 15:26:28</text>'+
						'<text class="price">￥14</text>'+
					'</div>'+
				'</div>'
				}
				document.getElementsByClassName("cons")[0].innerHTML = htmlC;
				document.getElementById("back").onclick = function(){
				window.history.back(-1);
		}
				document.getElementsByClassName("tit")[0].onclick = function(){
					var show = document.getElementById("show");
					removeClass(show,"show");
				}
				var conts = document.getElementsByClassName("cont");
				var icons = document.querySelectorAll(".cont .iconfont");
				var texts = document.querySelectorAll(".cont .one");
				
				////ES6语法可以很好利用let获取i
//				for (let i = 0;i < conts.length;i++) {
//					    conts[i].i = i;
//						conts[i].onclick = function(){
//							for (var j = 0;j < icons.length;j++) {
//								removeClass(icons[j],'icon-xuanzedui');
//							}
//							addClass(icons[i],"icon-xuanzedui");
//							var show = document.getElementById("show");
//							addClass(show,"show");
//					}
//				}
//				// 利用index属性获取i
				for (var i = 0;i < conts.length;i++) {
					    conts[i].i = i;
						conts[i].onclick = function(){
							for (var j = 0;j < icons.length;j++) {
								removeClass(icons[j],'icon-xuanzedui');
							}
							console.log(this.i)
							addClass(icons[this.i],"icon-xuanzedui");
						    document.querySelector(".tit .one").innerText = texts[this.i].innerText;
						    console.log(texts[this.i].innerText)
							var show = document.getElementById("show");
							addClass(show,"show");
					}
				}
				////闭包
	</script>
</html>
